<template>
  <div class="page-wrapper" v-loading="loading">
    <header class="setting-bar">
      <el-switch
        v-model="isShowTotal"
        active-color="#13ce66"
        inactive-color="#0094ff"
        :active-text="$t('EXCEL.TotalDisplay')"
        :inactive-text="$t('EXCEL.SimpleDisplay')"
      />
      <el-button class="top-op-btn" type="primary" @click="getLangData">
        {{ $t("COMMON.Refresh") }}
      </el-button>
      <el-button
        class="top-op-btn"
        type="primary"
        @click="isShowEditModal = true"
      >
        {{ $t("COMMON.Edit") }}
      </el-button>
      <el-button class="top-op-btn" @click="handleReset" size="medium">
        {{ $t("COMMON.Reset") }}
      </el-button>
    </header>
    <el-collapse v-show="!isShowTotal">
      <el-collapse-item :title="$t('EXCEL.CurrentDisplayLang')" name="1">
        <el-checkbox-group class="content" v-model="selectedLangs">
          <el-checkbox v-for="l of totalLangs" :key="l" :label="l">
            {{ l | showLangName }}
          </el-checkbox>
        </el-checkbox-group>
      </el-collapse-item>
      <el-collapse-item :title="$t('EXCEL.CurrentDisplayModule')" name="2">
        <el-checkbox-group class="content" v-model="selectedModules">
          <el-checkbox v-for="m of totalModules" :key="m" :label="m">
            {{ m | showLangModule }}
          </el-checkbox>
        </el-checkbox-group>
      </el-collapse-item>
    </el-collapse>
    <PaginationTable
      :border="true"
      :data="showData"
      :columns="langColumns"
      :pagination-background="true"
      :table-height="1200"
      :is-show-number="true"
    >
    </PaginationTable>
    <!-- 修改配置 -->
    <el-dialog
      :visible.sync="isShowEditModal"
      :modal-append-to-body="true"
      :title="$t('LANGS.UpdateLangConfigs')"
      width="1000px"
    >
      <update-langs
        v-if="isShowEditModal"
        :data="langData"
        :limit-rules="{
          lang: ['zh-CN', 'zh-XG', 'en'],
        }"
        @handleCancel="handleCancel"
      />
    </el-dialog>
  </div>
</template>

<script>
import UpdateLangs from "@/components/dialogs/update-langs";

import { getLangFile } from "@/api/lang";
import {
  transLangToArr,
  langTotalColumns,
  langSimpleColumns,
  // transArrToLang,
} from "@/libs/business";
import langFilter from "@/filters/lang";

export default {
  name: "TransLang",
  components: {
    UpdateLangs,
  },
  filters: {
    ...langFilter,
  },
  data() {
    return {
      langData: [],
      selectedLangs: [],
      selectedModules: [],
      loading: false,
      // 是否为简化模式的表格
      isShowTotal: false,
      // 编辑信息
      isShowEditModal: false,
    };
  },
  computed: {
    // 语言类型列表
    totalLangs() {
      const langs = [];
      for (let data of this.langData) {
        if (!langs.includes(data.lang)) {
          langs.push(data.lang);
        }
      }
      return langs;
    },
    // 所有的模块
    totalModules() {
      const langModules = [];
      for (let data of this.langData) {
        if (!langModules.includes(data.module)) {
          langModules.push(data.module);
        }
      }
      return langModules;
    },
    // 过滤后的显示语言数据
    filterLangData() {
      const { langData, selectedModules, selectedLangs } = this;

      const filterLangData = langData
        .filter((item) => selectedModules.includes(item.module))
        .filter((item) => selectedLangs.includes(item.lang));

      return filterLangData;
    },
    langColumns() {
      if (this.isShowTotal) {
        return langTotalColumns;
      }
      return langSimpleColumns;
    },
    // 简化并过滤后的语言数据
    showData() {
      if (this.isShowTotal) {
        return this.langData.reduce((prev, current) => {
          const isRepeat = prev.some(
            (item) =>
              item.module === current.module &&
              item.sentence === current.sentence
          );
          if (isRepeat) {
            const item = prev.find((item) =>
              item.sentence.includes(current.sentence)
            );
            item[current.lang] = current.sentenceValue;
          } else {
            prev.push({
              ...current,
              [current.lang]: current.sentenceValue,
            });
          }

          return prev;
        }, []);
      }
      return this.filterLangData;
    },
  },
  watch: {
    isShowTotal() {
      this.initSelected();
    },
  },
  mounted() {
    this.getLangData();
  },
  methods: {
    getLangData() {
      const ctx = this;
      ctx.loading = true;
      getLangFile({
        params: {},
        async success(res) {
          ctx.loading = false;
          if (res) {
            await ctx.setLangData(res);
            ctx.initSelected();
          }
        },
        error(err) {
          ctx.loading = false;
          throw err;
        },
      });
    },
    setLangData(lang) {
      this.langData = [];
      this.langData.push(...transLangToArr(lang));
    },
    initSelected() {
      this.initLangs();
      this.initModules();
    },
    initLangs() {
      // this.selectedLangs = [...this.totalLangs];
      // 默认只显示中文
      this.selectedLangs = ["zh-CN"];
    },
    initModules() {
      this.selectedModules = [...this.totalModules];
    },
    handleReset: function () {
      this.isShowTotal = false;
      this.initSelected();
    },
    handleCancel() {
      this.isShowEditModal = false;
      this.getLangData();
    },
  },
};
</script>

<style scoped lang="scss">
.page-wrapper {
  width: 100%;

  .setting-bar {
    width: 100%;
    padding: 0 0 15px 0;
    .top-op-btn {
      margin-left: 10px;
      padding: 8px 16px;
    }
  }

  .filter-container {
    padding: 10px 0;
    .desc,
    .content {
      margin: 0 5px;
    }
    .content {
      display: inline-block;
    }
  }
}
</style>
